<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar-rich-text
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <input type="file" id="fileInput" accept=".xlsx" style="display: none;" />
  <button id="fileInputBut" onclick="document.getElementById('fileInput').click()">选择Excel文件</button>
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var ROOT_PATH = 'https://pic2.imge.cc/2025/03/22/67de56e138fa3.png';
    var option;

    const weatherIcons = {
      Youyi: 'https://pic2.imge.cc/2025/03/22/67de56eea5ed0.png',
      Lian: 'https://pic2.imge.cc/2025/03/22/67de56ec6ea6b.png',
      Mulin: 'https://pic2.imge.cc/2025/03/22/67de56ea14970.png',
      Tiandou: 'https://pic2.imge.cc/2025/03/22/67de56e138fa3.png'
    };
    const seriesLabel = {
      show: true
    };
    document.getElementById('fileInput').addEventListener('change', function(e) {
      const file = e.target.files[0];
      if (!file) return;
      // 读取Excel文件
      const reader = new FileReader();
      reader.onload = function(e) {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, {type: 'array'});
        const sheetName = workbook.SheetNames[4]; // 取第一个工作表
        const worksheet = workbook.Sheets[sheetName];
        const json = XLSX.utils.sheet_to_json(worksheet, {header:1});
        var youyiData = ['Youyi'];
        var lianData = ['Lian'];
        var mulinData = ['Mulin'];
        var tiandouData = ['Tiandou']
        for (let row of json.slice(1)) {
            if (row[0] !== undefined) {
              youyiData.push(Number(row[0]));
            }
            if (row[1] !== undefined) {
              lianData.push(Number(row[3]));
            }
            if (row[2] !== undefined) {
              mulinData.push(Number(row[2]));
            }
            if (row[3] !== undefined) {
              tiandouData.push(Number(row[1]));
            }
        }
        option = {
          dataset: {
            id: 'weatherStats', // 数据集标识
            source: [
              ['天气类型', '总督', '提督', '舰长', '开放'],
              youyiData,
              lianData,
              mulinData,
              tiandouData
            ]
          },
          title: {
            text: '航海构成分析'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
          },
          legend: {
            data: ['总督', '提督', '舰长', '开放']
          },
          grid: { left: 100 },
          toolbox: { show: true, feature: { saveAsImage: {} } },
          xAxis: {
            type: 'value',
            name: 'Peoples',
            axisLabel: { formatter: '{value}' }
          },
          yAxis: {
            type: 'category',
            inverse: true,
            // 通过 dataset 自动映射天气类型（也可保留手动定义）
            data: ['Youyi', 'Lian', 'Mulin', 'Tiandou'],
            axisLabel: {
              formatter: function (value) {
                return '{' + value + '| }\n{value|' + value + '}';
              },
              margin: 20,
              rich: {
                value: {
                  lineHeight: 30,
                  align: 'center'
                },
                Youyi: {
                  height: 40,
                  align: 'center',
                  backgroundColor: {
                    image: weatherIcons.Youyi
                  }
                },
                Lian: {
                  height: 40,
                  align: 'center',
                  backgroundColor: {
                    image: weatherIcons.Lian
                  }
                },
                Mulin: {
                  height: 40,
                  align: 'center',
                  backgroundColor: {
                    image: weatherIcons.Mulin
                  }
                },          
                Tiandou: {
                  height: 40,
                  align: 'center',
                  backgroundColor: {
                    image: weatherIcons.Tiandou
                  }
                }
              }
            }
          },
          series: [
            {
              name: '总督',
              type: 'bar',
              datasetId: 'weatherStats', // 关联数据集
              encode: { x: 1, y: 0 }, // 映射数据位置
              itemStyle: { color: '#fd5732' }, // 设置总督颜色为红色
              label: seriesLabel,
            },
            {
              name: '提督',
              type: 'bar',
              datasetId: 'weatherStats',
              encode: { x: 2, y: 0 }, // 第二列数据
              itemStyle: { color: '#ffc7ff' }, // 设置提督颜色为紫色
              label: seriesLabel
            },
            {
              name: '舰长',
              type: 'bar',
              datasetId: 'weatherStats',
              encode: { x: 3, y: 0 }, // 第三列数据
              itemStyle: { color: '#71c4ef' }, // 设置舰长颜色为蓝色
              label: seriesLabel
            },
            {
              name: '开放',
              type: 'bar',
              datasetId: 'weatherStats',
              encode: { x: 4, y: 0 }, // 第三列数据
              itemStyle: { color: '#61bc84' }, // 设置舰长颜色为蓝色
              label: seriesLabel
            }
          ]
        };

        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }
      }
      reader.readAsArrayBuffer(file);
      document.getElementById('fileInputBut').style.display = 'none';
    })
    // option = {
    //   dataset: {
    //     id: 'weatherStats', // 数据集标识
    //     source: [
    //       ['天气类型', '总督', '提督', '舰长', '开放'],
    //       ['Youyi', 165, 150, 220, 120],
    //       ['Lian', 170, 105, 82, 158],
    //       ['Mulin', 30, 110, 63, 153],
    //       ['Tiandou', 30, 110, 63, 200]
    //     ]
    //   },
    //   title: {
    //     text: '航海构成分析'
    //   },
    //   tooltip: {
    //     trigger: 'axis',
    //     axisPointer: { type: 'shadow' }
    //   },
    //   legend: {
    //     data: ['总督', '提督', '舰长', '开放']
    //   },
    //   grid: { left: 100 },
    //   toolbox: { show: true, feature: { saveAsImage: {} } },
    //   xAxis: {
    //     type: 'value',
    //     name: 'Peoples',
    //     axisLabel: { formatter: '{value}' }
    //   },
    //   yAxis: {
    //     type: 'category',
    //     inverse: true,
    //     // 通过 dataset 自动映射天气类型（也可保留手动定义）
    //     data: ['Youyi', 'Lian', 'Mulin', 'Tiandou'],
    //     axisLabel: {
    //       formatter: function (value) {
    //         return '{' + value + '| }\n{value|' + value + '}';
    //       },
    //       margin: 20,
    //       rich: {
    //         value: {
    //           lineHeight: 30,
    //           align: 'center'
    //         },
    //         Youyi: {
    //           height: 40,
    //           align: 'center',
    //           backgroundColor: {
    //             image: weatherIcons.Youyi
    //           }
    //         },
    //         Lian: {
    //           height: 40,
    //           align: 'center',
    //           backgroundColor: {
    //             image: weatherIcons.Lian
    //           }
    //         },
    //         Mulin: {
    //           height: 40,
    //           align: 'center',
    //           backgroundColor: {
    //             image: weatherIcons.Mulin
    //           }
    //         },          
    //         Tiandou: {
    //           height: 40,
    //           align: 'center',
    //           backgroundColor: {
    //             image: weatherIcons.Tiandou
    //           }
    //         }
    //       }
    //     }
    //   },
    //   series: [
    //     {
    //       name: '总督',
    //       type: 'bar',
    //       datasetId: 'weatherStats', // 关联数据集
    //       encode: { x: 1, y: 0 }, // 映射数据位置
    //       itemStyle: { color: '#fd5732' }, // 设置总督颜色为红色
    //       label: seriesLabel,
    //       // markPoint: {
    //       //   symbolSize: 1,
    //       //   symbolOffset: [0, '50%'],
    //       //   label: {
    //       //     formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
    //       //     backgroundColor: 'rgb(242,242,242)',
    //       //     borderColor: '#aaa',
    //       //     borderWidth: 1,
    //       //     borderRadius: 4,
    //       //     padding: [4, 10],
    //       //     lineHeight: 26,
    //       //     // shadowBlur: 5,
    //       //     // shadowColor: '#000',
    //       //     // shadowOffsetX: 0,
    //       //     // shadowOffsetY: 1,
    //       //     position: 'right',
    //       //     distance: 20,
    //       //     rich: {
    //       //       a: {
    //       //         align: 'center',
    //       //         color: '#fff',
    //       //         fontSize: 18,
    //       //         textShadowBlur: 2,
    //       //         textShadowColor: '#000',
    //       //         textShadowOffsetX: 0,
    //       //         textShadowOffsetY: 1,
    //       //         textBorderColor: '#333',
    //       //         textBorderWidth: 2
    //       //       },
    //       //       b: {
    //       //         color: '#333'
    //       //       },
    //       //       c: {
    //       //         color: '#ff8811',
    //       //         textBorderColor: '#000',
    //       //         textBorderWidth: 1,
    //       //         fontSize: 22
    //       //       }
    //       //     }
    //       //   },
    //       //   data: [
    //       //     { type: 'max', name: 'max days: ' },
    //       //     { type: 'min', name: 'min days: ' }
    //       //   ]
    //       // }
    //     },
    //     {
    //       name: '提督',
    //       type: 'bar',
    //       datasetId: 'weatherStats',
    //       encode: { x: 2, y: 0 }, // 第二列数据
    //       itemStyle: { color: '#ffc7ff' }, // 设置提督颜色为紫色
    //       label: seriesLabel
    //     },
    //     {
    //       name: '舰长',
    //       type: 'bar',
    //       datasetId: 'weatherStats',
    //       encode: { x: 3, y: 0 }, // 第三列数据
    //       itemStyle: { color: '#71c4ef' }, // 设置舰长颜色为蓝色
    //       label: seriesLabel
    //     },
    //     {
    //       name: '开放',
    //       type: 'bar',
    //       datasetId: 'weatherStats',
    //       encode: { x: 4, y: 0 }, // 第三列数据
    //       itemStyle: { color: '#61bc84' }, // 设置舰长颜色为蓝色
    //       label: seriesLabel
    //     }
    //   ]
    // };

    // if (option && typeof option === 'object') {
    //   myChart.setOption(option);
    // }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>